<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>日历控件</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" href="css/ui-datepicker.css" />
		<style>
			body{
				margin: 0;
				padding: 0;
			}
			.datepicker{
				border: 1px solid #ccc;
				border-radius: 4px;
				padding: 5px;
				height: 1.04347rem;
				line-height: 24px;
				width: 100%;
			}
			.datepicker:focus{
				outline: 0 none;
				border: 1px solid #1abc9c;
			}
		</style>
	</head>
	<body>
		<input type="text" class="datepicker"/>
		<script src="js/resp.js"></script>
		<script src="js/date.js"></script>
		<script src="js/main.js"></script>
		<script src="js/jquery-2.0.0.min.js"></script>
		<script>
			//初始化
			datepicker.init('.datepicker');
			//价格渲染
           	function render() {
           		var price = [1,3,4,32,423,12,53, 34,324];
           		var days = [];
           		for(var i=0; i<7; i++) {
           			days.push($(".ui-datepicker-body td").eq(22+i).get(0));           			
           		}
                days.forEach(function (item, index) {
                    $(item).children(".ui-datepicker-price").html("￥" + price[index]);
                });
           	}
           	render();
			
			//点击高亮
			$(".ui-datepicker-body td").click(function() {
				$(".ui-datepicker-body td").removeClass('ui-datepicker-clikeMe');
				$(this).addClass('ui-datepicker-clikeMe');
				console.log($(this).text());
				console.log(new Date())
			})
		</script>
	</body>
</html>
